<template>
	<view class="container bg-fff">
		<view class="con flex-column-center">
			<image :src="$setting.avatarUrl()"></image>
			<view class="title">该程序将获取以下授权</view>
			<view class="tips">获取您手机号码</view>
			<button class="login u-reset-button flex-center" hover-class="login-hover" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" @bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">手机号一键登录</button>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			sessionKey: "",
		}
	},
	onLoad() {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				uni.$u.api.postSession({
					code: res.code
				}).then(res => {
					this.sessionKey = res.session_key;
				})
			},
		});
	},
	methods: {
		handleAgreePrivacyAuthorization() {
			
		},
		getPhoneNumber(e) {
			// console.log(e);
			uni.showLoading({
			    title: '正在授权..',
				mask: true
			});
			
			uni.$u.api.postBindMobile({
				iv: e.detail.iv,
				encrypted_data: e.detail.encryptedData,
				session_key: this.sessionKey,
			}).then(res => {
				uni.navigateBack();
			})
		},
		getHttp() {
			
		},
	},
}
</script>

<style lang="scss" scoped>
	.container {
		
		.con {
			padding-top: 100rpx;
			
			image {
				width: 180rpx;
				height: 180rpx;
			}
			
			.title {
				font-size: 34rpx;
				font-weight: bold;
				margin-top: 40rpx;
			}
			
			.tips {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #666666;
			}
			
			.login {
				margin-top: 50rpx;
				width: 600rpx;
				height: 90rpx;
				background-color: $uni-color-theme;
				border-radius: 90rpx;
				color: #ffffff;
				font-size: 30rpx;
				border: 1px solid $uni-color-theme;
			}
			
			.login-hover {
				background-color: #FFFFFF;
				color: #2b85e4;
				border-color: #2b85e4;
			}
		}
	}
</style>
